<!--
* @author wn
* @date 2022/05/17 15:16:28
* @description: 二级分类 筛选区 组件
!-->
<template>
	<!-- 筛选区 -->
	<!-- <transition name="fade"> -->
	<div class="sub-filter" v-if="list.length">
		<div v-for="item in list" :key="item.id" class="item">
			<div class="head">{{ item.name }}:</div>
			<ul class="body">
				<li v-for="proper in item.properties" :key="proper.id">
					<a
						href="javascript:;"
						:class="{ active: proper.id === item.bg }"
						@click="filterChange(item, proper)"
					>
						{{ proper.name }}
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!-- 骨架屏 -->
	<div v-else class="sub-filter">
		<XtxSkeleton animated width="800px" height="40px" />
		<XtxSkeleton animated width="800px" height="40px" />
		<XtxSkeleton animated width="600px" height="40px" />
		<XtxSkeleton animated width="600px" height="40px" />
		<XtxSkeleton animated width="600px" height="40px" />
	</div>
	<!-- </transition> -->
</template>
<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { findSubCategoryFilter } from '@/network/category'
export default {
	name: 'SubFilter',
	setup(props, { emit }) {
		const list = ref([])
		const route = useRoute()
		let brandId = null
		// 获取筛选参数的函数
		const params = { paramsId: brandId, attrs: [] }
		const filterFn = async id => {
			// 获取数据前清空之前数据 防止叠加
			list.value = []
			const { result } = await findSubCategoryFilter(id)
			// 创造  properties--内全部对象  放在首位
			// result.brands           品牌数据
			// result.saleProperties   筛选条件
			// 把品牌和筛选条件放到了同一个数组内
			const all = { id: null, name: '全部' }
			result.brands.unshift(all)
			result.saleProperties.forEach(item => {
				item.properties.unshift(all)
				item.bg = null
			})
			list.value.push({
				id: null,
				name: '品牌',
				properties: result.brands,
				bg: null,
			})
			list.value.push(...result.saleProperties)
			// console.log('11111111111   ', list.value)
			// 触发筛选条件
			brandId = result.selectedBrand
		}
		// 观察 id 的变化
		watch(
			() => route.params.id,
			newId => {
				if (newId && `/category/sub/${newId}` === route.path) {
					filterFn(newId)
					// 重置属性
					params.attrs = []
				}
			},
			{
				immediate: true,
			}
		)
		// 点击触发筛选条件  父组件从新获取数据
		// item 每一行对象  proper 行内所有属性对象数组的个体[全部,蓝色]
		const filterChange = (item, proper) => {
			// 防止重复点击
			if (item.bg === proper.id) return
			item.bg = proper.id
			emit('filterChange', getFilterParams(item, proper))
		}

		const getFilterParams = (item, proper) => {
			// 查找数组同是否存在之前添加的对象 索引
			const index = params.attrs.findIndex(attr => attr.groupName === item.name)
			if (index === -1) {
				// 不存在则添加对象
				params.attrs.push({
					groupName: item.name,
					propertyName: proper.name,
				})
			} else {
				// 如果存在，修改值即可
				params.attrs[index].propertyName = proper.name
			}

			return params
		}
		return { list, filterChange }
	},
}
</script>
<style scoped lang="less">
.sub-filter {
	background: #fff;
	padding: 25px;
	.item {
		display: flex;
		line-height: 40px;
		.head {
			width: 80px;
			color: #999;
		}
		.body {
			display: flex;
			flex-wrap: wrap;
			flex: 1;
			a {
				margin-right: 36px;
				transition: all 0.3s;
				&.active,
				&:hover {
					color: @xtxColor;
				}
			}
		}
	}
}
// 骨架屏
.xtx-skeleton {
	padding: 10px 0;
}
</style>
